<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        class="filter-item"
        v-if="~accessable.indexOf('manage:ad_add')"
        type="primary"
        v-waves
        icon="el-icon-plus"
        @click="handleUpdate(null)"
      >添加</el-button>
      <el-input
        @keyup.enter.native="handleFilter"
        style="width: 200px;"
        class="filter-item"
        placeholder="广告名称"
        v-model="filters.like$title"
      ></el-input>
      <el-button
        class="filter-item"
        type="primary"
        v-waves
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
        class="filter-item"
        type="primary"
        v-if="~accessable.indexOf('manage:ad_export')"
        v-waves
        icon="el-icon-document"
        @click="exportExcelFile"
      >导出</el-button>
    </div>
    <el-table
      :data="list"
      :height="tableHeight"
      @sort-change="sortChange"
      v-loading="listLoading"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>

      <el-table-column width="140" prop="adPosition" align="center" label="广告位置">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.adPosition | adPositiontagFilter"
          >{{scope.row.adPosition|adPositionFilter}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="title" align="center" label="广告名称" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.title}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="sort" align="center" label="顺序" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.sort}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="startDate" align="center" label="生效时间" width="170">
        <template slot-scope="scope">
          <span>{{scope.row.startDate}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="endDate" align="center" label="失效时间" width="170">
        <template slot-scope="scope">
          <span>{{scope.row.endDate}}</span>
        </template>
      </el-table-column>

      <el-table-column width="100" prop="status" align="center" label="发布状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statustagFilter">{{scope.row.status|statusFilter}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="imgSrc" align="center" label="图片" width="150">
        <template slot-scope="scope">
          <img :src="scope.row.imgSrc|absUrl" alt class="img-src">
        </template>
      </el-table-column>

      <el-table-column prop="createTime" align="center" label="操作时间" width="170">
        <template slot-scope="scope">
          <span>{{scope.row.createTime}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="linkAddr" align="center" label="链接" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.linkAddr}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="200" class-name="small-padding">
        <template slot-scope="scope">
          <el-button
            type="primary"
            v-if="~accessable.indexOf('manage:ad_modify')"
            size="mini"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            v-if="~accessable.indexOf('manage:ad_delete')"
            type="danger"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="params.page"
        :page-sizes="[10,20,30,50]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="dialogFormVisible">
      <el-form
        class="dialog-form"
        :rules="rules"
        ref="dataForm"
        :model="temp"
        label-position="left"
        label-width="120px"
      >
        <el-form-item label="广告名称" prop="title">
          <el-input v-model="temp.title" maxlength="50" placeholder="广告名称"></el-input>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="广告位置" prop="adPosition">
              <el-select v-model="temp.adPosition" placeholder="请选择">
                <el-option
                  v-for="(item,value) in adPositionFilter"
                  :key="value"
                  :label="item"
                  :value="value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="顺序" prop="sort">
              <el-input-number v-model="temp.sort" label="顺序(数字大靠前)"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="生效时间" prop="startDate">
              <el-date-picker
                v-model="temp.startDate"
                value-format="yyyy-MM-dd HH:mm:ss"
                align="right"
                type="datetime"
                placeholder="选择生效时间"
                :picker-options="pickerOptions1"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="失效时间" prop="endDate">
              <el-date-picker
                v-model="temp.endDate"
                value-format="yyyy-MM-dd HH:mm:ss"
                align="right"
                type="datetime"
                placeholder="选择失效时间"
                :picker-options="pickerOptions1"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="链接" prop="linkAddr">
          <el-input v-model="temp.linkAddr" placeholder="链接"></el-input>
        </el-form-item>
        <el-form-item label="发布状态" prop="status">
          <el-radio-group v-model="temp.status">
            <el-radio
              v-for="(item,value) in statusFilter"
              :key="value"
              :label="value"
              :value="value"
            >{{item}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="图片" prop="imgSrc">
          <el-upload
            class="avatar-uploader"
            :action="UPLOAD_URL"
            :show-file-list="false"
            :on-success="handleAvatarSuccess('imgSrc')"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="temp.imgSrc" :src="temp.imgSrc|absUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" :loading="submiting" @click="submitFormAction">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style scoped>
.avatar-uploader {
  width: 375px;
  height: 155px;
}

.avatar-uploader >>> .avatar {
  width: 375px;
  height: 155px;
}

.avatar-uploader >>> .avatar-uploader-icon {
  width: 375px;
  height: 155px;
}
.img-src {
  height: 100px;
}
</style>

<script>
let statusFilter = ['上线', '下线']
let statustagFilter = ['success', 'danger', 'info', 'warning']

let adPositionFilter = ['首页底部', '首页顶部', '特价专区', '限时抢购（封面）', '限时抢购（活动页）']
let adPositiontagFilter = ['success', 'danger', 'info', 'warning']

export default {
  data () {
    return {
      tableHeight: 400,
      total: 0,
      temp: {
        id: '',

        title: '',

        sort: '',

        startDate: '',

        endDate: '',

        status: '',

        imgSrc: '',

        linkAddr: '',

        cityId: '',

        adPosition: ''
      },
      pickerOptions1: {
        shortcuts: [
          {
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      statusFilter: statusFilter,

      cityIdOptions: [],

      adPositionFilter: adPositionFilter,

      rules: {
        title: [
          {
            required: true,
            message: '广告名称不能为空',
            trigger: 'change'
          },
          {
            max: 50,
            message: '广告名称不能大于50个字',
            trigger: 'change'
          }
        ],

        sort: [
          {
            required: true,
            message: '顺序不能为空',
            trigger: 'change'
          }
        ],

        startDate: [
          {
            required: true,
            message: '生效时间不能为空',
            trigger: 'change'
          }
        ],

        endDate: [
          {
            required: true,
            message: '失效时间不能为空',
            trigger: 'change'
          }
        ],

        status: [
          {
            required: true,
            message: '请选中发布状态',
            trigger: 'change'
          }
        ],

        imgSrc: [
          {
            required: true,
            message: '请上传图片',
            trigger: 'change'
          }
        ],

        linkAddr: [
          {
            required: false,
            message: '链接不能为空',
            trigger: 'change'
          }
        ],

        cityId: [
          {
            required: true,
            message: '城市位置不能为空',
            trigger: 'change'
          }
        ],

        adPosition: [
          {
            required: true,
            message: '广告位置不能为空',
            trigger: 'change'
          }
        ]
      }
    }
  },
  created () {
    this.init('ad', 1).loadData()

    // this.combOptions("city").then(info => {
    //   this.cityIdOptions = info;
    // });
    this.tableHeight = window.innerHeight - 300
  },
  filters: {
    statusFilter (status) {
      return statusFilter[parseInt(status)]
    },
    statustagFilter (status) {
      return statustagFilter[parseInt(status)]
    },

    adPositionFilter (status) {
      return adPositionFilter[parseInt(status)]
    },
    adPositiontagFilter (status) {
      return adPositiontagFilter[parseInt(status)]
    }
  },
  methods: {
    exportExcelFile () {
      this.exportExcel({
        title: '广告管理',
        fields: [
          {
            field: 'title',
            title: '广告名称'
          },

          {
            field: 'sort',
            title: '顺序'
          },

          {
            field: 'startDate',
            title: '生效时间'
          },

          {
            field: 'endDate',
            title: '失效时间'
          },

          {
            field: 'status',
            title: '发布状态',
            valueMap: ['上线', '下线']
          },

          {
            field: 'createTime',
            title: '操作时间'
          },

          {
            field: 'linkAddr',
            title: '链接'
          },

          {
            field: 'cityName',
            title: '城市位置'
          },

          {
            field: 'adPosition',
            title: '广告位置',
            valueMap: ['首页底部', '首页顶部', '特价专区', '限时抢购（封面）', '限时抢购（活动页）']
          }
        ]
      }).then(info => {
        this.openWin(info)
      })
    }
  }
}
</script>
